<template>
  <div class="seven_content myStyle">
    <div class="content_top">
      <StrokeTitle2 title="数据统计" class="float margin" style="width: 99%">
        <div class="flex_center" slot="select">
          <ElementRadio v-model="model" :isButton="true" @change="radioChange1" :options="[  {
            value: 'lastMonth', label: '上月' },{value: 'quarter',label: '当季'}]" />
          <!-- <ElementSelect ref="psNameSelect" :data="selectList" :isSelected="true" @select="selectList1" /> -->
        </div>
        <div class="flex_center Echarts" slot="content">
          <!--  <div class="bzjk_box flex_between">
            <div class="bzjk_item backgroung flex_between">
              <div class="bzjk_item_left">
                <div class="bzjk_item_number">
                  {{ $formatNum(top1[0].num) }}
                  <span style="font-size: 16px"> 次 </span>

                  <div class="small_number text_shadow" v-if="top1[0].val1 >= 0">
                    {{ top1[0].val1.toFixed(0) }}%
                  </div>
                  <img src="../../../assets/images/echarts/sheng.png" alt="" v-if="top1[0].val1 >= 0" />

                  <div class="small_number text_shadow_danger" v-if="top1[0].val1 < 0">
                    {{ -top1[0].val1.toFixed(0) }}%
                  </div>
                  <img src="../../../assets/images/echarts/jiang.png" alt="" v-if="top1[0].val1 < 0" />
                </div>
                <div class="bzjk_item_center">
                  <div class="border"></div>
                </div>
                <div class="bzjk_item_title">原物料消耗率</div>
              </div>
              <div class="bzjk_item_right">
                标准值{{ top1[0].val2.toFixed(2) }}
                <img class="icon" :src="bzjkImgList[0]" alt="" />
              </div>
            </div>
            <img src="@/assets/images/echarts/zu2.png" alt="" class="and" />
            <div class="bzjk_item backgroung flex_between">
              <div class="bzjk_item_left">
                <div class="bzjk_item_number">
                  {{ $formatNum(top1[1].num) }}
                  <span style="font-size: 16px"> 次 </span>
                  <div class="small_number text_shadow" v-if="top1[1].val1 >= 0">
                    {{ top1[1].val1.toFixed(0) }}%
                  </div>
                  <img src="../../../assets/images/echarts/sheng.png" alt="" v-if="top1[1].val1 >= 0" />

                  <div class="small_number text_shadow_danger" v-if="top1[1].val1 < 0">
                    {{ -top1[1].val1.toFixed(0) }}%
                  </div>
                  <img src="../../../assets/images/echarts/jiang.png" alt="" v-if="top1[1].val1 < 0" />
                </div>
                <div class="bzjk_item_center">
                  <div class="border"></div>
                </div>
                <div class="bzjk_item_title">水利用率</div>
              </div>
              <div class="bzjk_item_right">
                标准值{{ top1[1].val2.toFixed(2) }}
                <img class="icon" :src="bzjkImgList[1]" alt="" />
              </div>
            </div>
            <img src="@/assets/images/echarts/zu2.png" alt="" class="and" />
            <div class="bzjk_item backgroung flex_between">
              <div class="bzjk_item_left">
                <div class="bzjk_item_number">
                  {{ $formatNum(top1[2].num) }}
                  <span style="font-size: 16px"> 次 </span>
                  <div class="small_number text_shadow" v-if="top1[2].val1 >= 0">
                    {{ top1[1].val1.toFixed(0) }}%
                  </div>
                  <img src="../../../assets/images/echarts/sheng.png" alt="" v-if="top1[2].val1 >= 0" />
                  <div class="small_number text_shadow_danger" v-if="top1[2].val1 < 0">
                    {{ -top1[2].val1.toFixed(2) }}%
                  </div>
                  <img src="../../../assets/images/echarts/jiang.png" alt="" v-if="top1[2].val1 < 0" />
                </div>
                <div class="bzjk_item_center">
                  <div class="border"></div>
                </div>
                <div class="bzjk_item_title">吨耗电</div>
              </div>
              <div class="bzjk_item_right">
                标准值{{ top1[2].val2.toFixed(2) }}
                <img class="icon" :src="bzjkImgList[2]" alt="" />
              </div>
            </div>
          </div> -->
          <div class="bzjk_box flex_between">
            <div class="cntj_item backgroung">
              <nav class="flex_center">
                <div class="cntj_item_content_item flex_center_direction cntj_item_content_item">
                  全员人均产出
                </div>
                <div class="cntj_item_content_item flex_center_direction cntj_item_content_item">
                  环比分析
                </div>
              </nav>
              <div class="cntj_item_content flex_between">
                <div class="cntj_item_content_item flex_center_direction cntj_item_content_item">
                  <div class="number">
                    {{ top.qy1  }}
                  </div>

                </div>
                <div class="cntj_item_content_item flex_center_direction cntj_item_content_item">
                  <div class="number" :class="top.qy2<0? 'numberRight': '' ">
                    {{ top.qy2  }}%
                  </div>
                </div>
              </div>
            </div>
            <img src="@/assets/images/echarts/zu2.png" alt="" class="and" />
            <div class="cntj_item backgroung">
              <nav class="flex_center">
                <div class="cntj_item_content_item flex_center_direction cntj_item_content_item">
                  单班产出率
                </div>
                <div class="cntj_item_content_item flex_center_direction cntj_item_content_item">
                  环比分析
                </div>
              </nav>
              <div class="cntj_item_content flex_between">
                <div class="cntj_item_content_item flex_center_direction cntj_item_content_item">
                  <div class="number">
                    {{ top.db1}}
                  </div>
                </div>
                <div class="cntj_item_content_item flex_center_direction cntj_item_content_item">
                  <div class="number" :class="top.db2<0? 'numberRight': '' ">
                    {{ top.db2}}%
                  </div>
                </div>
              </div>
            </div>
            <img src="@/assets/images/echarts/zu2.png" alt="" class="and" />
            <div class="cntj_item backgroung">
              <nav class="flex_center">
                <div class="cntj_item_content_item flex_center_direction cntj_item_content_item">
                  不达标项数量
                </div>
                <div class="cntj_item_content_item flex_center_direction cntj_item_content_item">
                  环比分析
                </div>
              </nav>
              <div class="cntj_item_content flex_between">
                <div class="cntj_item_content_item flex_center_direction cntj_item_content_item">
                  <div class="number">
                    {{ top.bdb1  }}
                  </div>
                </div>
                <div class="cntj_item_content_item flex_center_direction cntj_item_content_item">
                  <div class="number" :class="top.bdb2<0? 'numberRight': '' ">
                    {{ top.bdb2  }}%
                  </div>
                </div>
              </div>
            </div>
            <img src="@/assets/images/echarts/zu2.png" alt="" class="and" />
            <div class="cntj_item backgroung">
              <nav class="flex_center">
                <div class="cntj_item_content_item flex_center_direction cntj_item_content_item">
                  维修费用
                </div>
                <div class="cntj_item_content_item flex_center_direction cntj_item_content_item">
                  环比分析
                </div>
              </nav>
              <div class="cntj_item_content flex_between">
                <div class="cntj_item_content_item flex_center_direction cntj_item_content_item">
                  <div class="number">
                    {{ top.sj1  }}
                  </div>
                </div>
                <div class="cntj_item_content_item flex_center_direction cntj_item_content_item">
                  <div class="number" :class="top.sj2<0? 'numberRight': '' ">
                    {{ top.sj2  }}%
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </StrokeTitle2>
    </div>
    <div class="content_center" :isCenter="true">
      <StrokeTitle2 title="不达标项统计分析" class="float margin" style="width: 99%" :isCenter="true">
        <div class="flex_center" slot="select">
          <ElementRadio v-model="model" :isButton="true" @change="radioChange2" :options="[  {
            value: 'lastMonth', label: '上月' },{value: 'quarter',label: '当季'}]" />
        </div>
        <!-- <ElementRadio v-model="model" :isButton="true" @change="radioChange2" /> -->
        <div class="flex_center_direction bdb_box" slot="content">
          <StrokeOrnament title="原物料" style="margin: 5px 0 0px 0"></StrokeOrnament>
          <div class="flex_center Echarts" style="height: 200px">
            <PieImg style="height: 140px; margin-top: -15px" legendLeft="32%" :data="top21" titleLeft="17.5%" titleTop="89%" cirTop="1" :isTitle="true" length="5" itemWidth="0.8" cirLeft="0.2" :img="require('@/assets/images/echarts/ywl.png')" />
            <!-- <div class="title">内控{{ top2[0] }}</div> -->
          </div>
        </div>
        <div class="backBor" slot="content"></div>
        <div class="flex_center_direction bdb_box" slot="content">
          <StrokeOrnament title="水利用率" style="margin: 5px 0 0px 0"></StrokeOrnament>
          <div class="flex_center Echarts" style="height: 200px">
            <PieImg style="height: 140px; margin-top: -15px" legendLeft="32%" :data="top22" titleLeft="17.5%" titleTop="89%" cirTop="1" :isTitle="true" length="5" itemWidth="0.8" cirLeft="0.2" :img="require('@/assets/images/echarts/slyl.png')" />
            <!-- <div class="title">内控{{ top2[1] }}</div> -->
          </div>
        </div>
        <div class="backBor" slot="content"></div>
        <div class="flex_center_direction bdb_box" slot="content">
          <StrokeOrnament title="吨耗电" style="margin: 5px 0 0px 0"></StrokeOrnament>
          <div class="flex_center Echarts" style="height: 200px" slot="content">
            <PieImg style="height: 140px; margin-top: -15px" legendLeft="32%" :data="top23" titleLeft="17.5%" titleTop="89%" cirTop="1" :isTitle="true" length="5" itemWidth="0.8" cirLeft="0.2" :img="require('@/assets/images/echarts/dhd.png')" />
            <!-- <div class="title title2">内控{{ top2[2] }}</div> -->
          </div>
        </div>
      </StrokeTitle2>
    </div>
    <div class="content_bottom">
      <StrokeTitle2 title="统计分析" class="float margin" style="width: 99%">
        <div slot="select" class="more" @click="$router.push('/report/seven/unstand')" v-show="unstandList.length>0"> 查看更多不合格项</div>
        <div class="flex_center" slot="content">
          <!-- <ElementRadio v-model="model2" :isButton="true" @change="radioChange3" /> -->
          <el-date-picker @change="select3" style="width:120px" :editable="false" clearable size="small" v-model="top3Form.rq" type="month" value-format="yyyy-MM" placeholder="选择统计时间">
          </el-date-picker>
        </div>
        <div class="flex_center Echarts" slot="content" style="margin-top:-10px">
          <el-table v-loading="loading" :data="unstandList">
            <el-table-column label="日期" align="center" prop="rq" width="180" />
            <el-table-column label="类别" align="center" prop="type1" />
            <el-table-column label="产品" align="center" prop="ggname" />
            <el-table-column label="内控" align="center" prop="internalControl" />
            <el-table-column label="实际" align="center" prop="actualValue" />
            <el-table-column label="操作" align="center" width="80px">
              <template slot-scope="scope">
                <div @click="handleView(scope.row)" style="color:#21bbf6;cursor: pointer;">查看</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </StrokeTitle2>
    </div>
    <!-- 添加或修改不达标项对话框 -->
    <el-dialog fullscreen :title="title" :visible.sync="open" width="700px" append-to-body v-myDialogDrag>
      <el-form ref="form" :model="form" label-width="90px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="类别" prop="type1">
              <!-- <el-input
                v-model="form.type1"
                placeholder="请输入类别(原物料、水、电)"
                :disabled="openDisabled"
              /> -->
              <el-select v-model="form.type1" placeholder="请选择类别" :disabled="openDisabled">
                <el-option value="原物料消耗率">原物料消耗率</el-option>
                <el-option value="水利用率">水利用率</el-option>
                <el-option value="吨耗电">吨耗电</el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="产品" prop="ggname">
              <el-select v-model="form.ggname" placeholder="请选择" @change="ggchangefun($event)" :disabled="openDisabled">
                <el-option-group v-for="group in options" :key="group.label" :label="group.label">
                  <el-option v-for="item in group.options" :key="item.dictValue" :label="item.dictLabel" :value="{ value:item.dictValue,label:item.dictLabel  }">
                  </el-option>
                </el-option-group>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品" prop="gg" v-show="false">
              <el-input v-model="form.gg" placeholder="请输入产品" :disabled="openDisabled" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属工厂" prop="factoryId">
              <el-select v-model="form.factoryId" placeholder="请选择所属工厂" clearable size="small" :disabled="true">
                <el-option v-for="dict in factoryListOptions" :key="dict.deptId" :label="dict.name" :value="dict.deptId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="日期" prop="rq">
              <el-date-picker :editable="false" clearable size="small" v-model="form.rq" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" :disabled="openDisabled">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="内控指标值" prop="internalControl">
              <el-input v-model="form.internalControl" placeholder="请输入内控指标" :disabled="openDisabled" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实际指标值" prop="actualValue">
              <el-input v-model="form.actualValue" placeholder="请输入实际指标" :disabled="openDisabled" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="原因" prop="season">
              <el-input v-model="form.season" type="textarea" placeholder="请输入内容" :disabled="openDisabled" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="措施" prop="measures">
              <el-input v-model="form.measures" type="textarea" placeholder="请输入内容" :disabled="openDisabled" />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" :disabled="openDisabled" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import StrokeTitle2 from "@/components/myComponents/stroke/title2.vue";
import { listUnstand2, getUnstand } from "@/api/report/complain/unstand";
import {
  reachStandardCount1,
  KanbanLeft,
  reachStandardCount2,
} from "@/api/report/complain/unstand";
import NormalLine from "@/components/echarts/line/normal.vue";
import { getFactoryList } from "@/api/report/complain/complain";
export default {
  components: {
    NormalLine,
    StrokeTitle2,
  },
  data() {
    return {
      model: "lastMonth",
      model2: "month",
      selectList: [
        { value: "", label: "全部" },
        { value: "1", label: "选项一" },
      ],
      // // 不达标趋势
      // top1: [
      //   { num: 0, val1: 0, val2: 0 },
      //   { num: 0, val1: 0, val2: 0 },
      //   { num: 0, val1: 0, val2: 0 },
      // ],
      // 统计数据
      top: {
        db1: 0,
        db2: 0,
        qy1: 0,
        qy2: 0,
        sj2: 0,
        sj1: 0,
        bdb2: 0,
        bdb1: 0,
      },
      top1Form: {
        jsrq: this.$getLastMonth("e"),
        ksrq: this.$getLastMonth("s"),
        val: 1,
        ggname: null,
      },

      // 不达标统计分析
      top21: [],
      top22: [],
      top23: [],
      top2: [],
      top2Form: {
        jsrq: this.$getLastMonth("e"),
        ksrq: this.$getLastMonth("s"),
      },

      //统计分析
      bottom: [],
      // top3Form: {
      //   jsrq: this.$getLastMonth("e"),
      //   ksrq: this.$getLastMonth("s"),
      //   val: 1,
      //   ggname: null,
      // },

      bzjkImgList: [
        require("@/assets/images/echarts/bar.png"),
        require("@/assets/images/echarts/line.png"),
        require("@/assets/images/echarts/bar.png"),
      ],
      loading: false,
      // 不达标项表格数据
      unstandList: [],
      // 查询参数
      top3Form: {
        pageNum: 1,
        pageSize: 3,
        rq:null,
      },
      //弹窗是否禁止编辑
      openDisabled: true,
      // 选中数组
      ids: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 所属工厂
      factoryListOptions: [],
      options: [],
      color: ["blue", "orange", "green", "pink"],
    };
  },
  created() {
    this.getFactoryList(); //工厂信息
    this.getList();
    this.reachStandardCount1(); // 不达标趋势
    this.reachStandardCount2(); // 不达标统计分析
    // this.reachStandardCount3(); // 不达标统计
  },
  methods: {
    // 不达标趋势
    radioChange1(e) {
      this.top1Form.ksrq = e[0];
      this.top1Form.jsrq = e[1];
      this.reachStandardCount1();
    },
    // selectList1(e) {
    //   console.log(e);
    //   this.top1Form.ggname = e;
    //   if (e == "全部") {
    //     this.top1Form.val = 1;
    //   } else {
    //     this.top1Form.val = 0;
    //   }
    //   this.reachStandardCount1();
    // },
    reachStandardCount1() {
      KanbanLeft(this.top1Form).then((res) => {
        if (res.code == 200) {
          this.top = res.data;
        }
      });
    },

    // 不达标统计分析
    radioChange2(e) {
      this.top2Form.ksrq = e[0];
      this.top2Form.jsrq = e[1];
      this.reachStandardCount2();
    },
    reachStandardCount2() {
      reachStandardCount2(this.top2Form).then((res) => {
        // console.log(2222, res);
        if (res.code == 200) {
          if (res.data.data1[0] == null) {
            this.top21 = [];
          } else {
            this.top21 = res.data.data1;
          }
          if (res.data.data2[0] == null) {
            this.top22 = [];
          } else {
            this.top22 = res.data.data2;
          }
          if (res.data.data3[0] == null) {
            this.top23 = [];
          } else {
            this.top23 = res.data.data3;
          }
          this.top2 = res.data.yData1;
        }
      });
    },

    // // 不达标统计
    // selectList3(e) {
    //   this.top3Form.ggname = e;
    //   if (e == "全部") {
    //     this.top3Form.val = 1;
    //   } else {
    //     this.top3Form.val = 0;
    //   }
    //   this.reachStandardCount3();
    // },
    // reachStandardCount3() {
    //   reachStandardCount3(this.top3Form).then((res) => {
    //     if (res.code == 200 && res.data.lenth != 0) {
    //       this.bottom = [];
    //       res.data.forEach((item) => {
    //         let obj = {};
    //         obj.name = item.name;
    //         obj.value1 = item.value;
    //         this.bottom.push(obj);
    //       });
    //     }
    //   });
    // },
    // 不达标统计分析
    radioChange3(e) {
      this.top3Form.ksrq = e[0];
      this.top3Form.jsrq = e[1];
      this.getList();
    },
    select3() {
      this.getList();
    },
    /** 查询不达标项列表 */
    getList() {
      // alert(1)
      this.loading = true;
      listUnstand2(this.top3Form).then((response) => {
        this.unstandList = response.rows;
        this.loading = false;
      });
    },
    //工厂信息
    getFactoryList() {
      getFactoryList().then((response) => {
        this.factoryListOptions = response.data;
      });
    },
    /** 查看按钮 */
    handleView(row) {
      this.reset();
      this.openDisabled = true;
      const id = row.id || this.ids;
      getUnstand(id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "查看不达标项";
      });
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        type1: null,
        gg: null,
        ggname: null,
        rq: null,
        season: null,
        measures: null,
        factoryId: null,
        delFlag: null,
        remark: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
      };
      this.resetForm("form");
    },
  },
};
</script>


<style lang="scss" scoped>
.seven_content {
  z-index: 10;
  background: #093b76;
  width: 100%;
  height: calc(100vh - 183px);
  overflow: auto;
  overflow-x: hidden;
  .content_top,
  .content_bottom,
  .content_center {
    //   background: red;
    width: 100%;
    height: 33.8%;
  }
  .content_top {
    height: 26.6%;
  }
  .content_bottom {
    height: 34.9%;
  }
  // .bzjk_box {
  //   width: 100%;
  //   height: 100%;
  //   padding: 12px 7%;
  //   max-height: 140px;
  //   min-height: 110px;
  //   .bzjk_item {
  //     width: 22.5%;
  //     background: linear-gradient(
  //       180deg,
  //       rgba(44, 119, 187, 0.5) 0%,
  //       rgba(18, 81, 141, 0.5) 100%
  //     );
  //     border: 1px solid #2489ee71;
  //     height: 100%;
  //     padding: 12px 30px;
  //     position: relative;
  //     .bzjk_item_left {
  //       width: 80%;
  //       height: 100%;
  //       display: flex;
  //       flex-direction: column;
  //       justify-content: space-between;
  //       align-items: flex-start;
  //       //  background: red;
  //       .bzjk_item_number {
  //         font-size: 30px;
  //         color: #ffffff;
  //         // background: red;
  //         display: flex;
  //         justify-content: flex-start;
  //         .small_number {
  //           font-size: 13px;
  //           margin-left: 5px;
  //           margin-top: 2px;
  //         }
  //         img {
  //           width: 10px;
  //           margin-top: 1px;
  //           height: 14px;
  //         }
  //       }
  //       .bzjk_item_center {
  //         width: 70%;
  //         height: 1px;
  //         background: rgba(52, 134, 218, 0.3);
  //         .border {
  //           width: 50px;
  //           height: 2px;
  //           background: rgba(52, 134, 218, 1);
  //         }
  //       }
  //       .bzjk_item_title {
  //         font-size: 15px;
  //         color: #ffffff;
  //       }
  //     }
  //     .bzjk_item_right {
  //       width: 80px;
  //       height: 80%;
  //       display: flex;
  //       align-items: center;
  //       justify-content: space-between;
  //       position: absolute;
  //       flex-direction: column;
  //       right: 6px;
  //       font-size: 12px;
  //       color: #c1f0fe;
  //       padding-top: 3px;
  //       letter-spacing: 1px;
  //       .icon {
  //         width: 80px;
  //       }
  //     }
  //   }
  // }
  .bzjk_box {
    width: 100%;
    height: 100%;
    padding: 2px 3%;
    margin-top: 2%;
    .cntj_item {
      width: 24.5%;
      background: linear-gradient(
        180deg,
        rgba(44, 119, 187, 0.5) 0%,
        rgba(18, 81, 141, 0.5) 100%
      );
      border: 1px solid #2489ee71;
      height: 100%;
      padding: 10px;
      color: #31fcf9;
      nav {
        font-size: 18px;
        // background: rgba(35, 107, 173, 0.7);
        height: 42%;
        width: 100%;
        justify-content: space-between;
        text-align: center;
        .cntj_item_content_item {
          background: rgba(35, 107, 173, 0.7);
          width: 49%;
          height: 99%;
          font-size: 16px;
        }
      }

      .cntj_item_content {
        width: 100%;
        height: 56%;
        margin-top: 2%;
        .cntj_item_content_item {
          width: 49%;
          background-image: url("~@/assets/images/echarts/zhuangshi.png");
          background-size: 100% 100%;
          height: 100%;
          background-color: rgba(35, 107, 173, 0.7);

          .number {
            font-size: 22px;
          }
          .numberRight {
            color: #f52b2e;
          }
          .unit {
            font-size: 13px;
            margin-top: 0.2% !important;
            color: #ffffff;
          }
        }
        .cntj_item_content_item-100 {
          width: 100%;
        }
      }
    }
    .and {
      margin: 0 20px;
      width: 40px;
    }
  }

  .Echarts {
    height: calc(100% - 20px);
    position: relative;
    .title {
      position: absolute;
      width: 100px;
      height: 20px;
      background: rgba(0, 218, 218, 0.3);
      border-radius: 5px;
      color: #d4f0ff;
      line-height: 20px;
      font-size: 14px;
      text-align: center;
      left: 14%;
      bottom: 4%;
    }
    .title2 {
      left: 12.7%;
    }
  }
  .bdb_box {
    padding: 5px 0;
    width: 32%;
    height: 100%;
    justify-content: flex-start;
  }
}
</style>
<style>
.seven_content .el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th {
  height: 2.6rem !important;
  background: #125496 !important;
}
.seven_content .el-table tr {
  height: 2.6rem !important;
}
.more {
  width: 135px;
  height: 22px;
  background: linear-gradient(180deg, #2c77bb 0%, #12518d 100%);
  border: 1px solid #3486da;
  border-radius: 10px;
  font-size: 14px;
  color: #d4f0ff;
  text-align: center;
  cursor: pointer;
}
</style>